import type { Metadata } from "next";
import { Rubik as FontSans } from "next/font/google";

import { cn } from "~/shared/lib/utils";

import { ThemeProvider } from "~/app/providers/theme";
import { Header } from "~/components/header";

import "./globals.css";

const fontSans = FontSans({ subsets: ["latin"], variable: "--font-sans" });

export const metadata: Metadata = {
  title: "GitHub Commit Explorer 🔎",
  description:
    "Instantly view and analyze your project's Git commit history with GitCommitExplorer, featuring real-time updates and a sleek interface.",
};

export default function RootLayout({
  children,
  modal,
}: Readonly<{
  children: React.ReactNode;
  modal: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={cn(
          "min-h-screen bg-background font-sans antialiased",
          fontSans.variable,
        )}
      >
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          <div className="relative flex min-h-screen flex-col">
            <Header />
            <main className="mb-10 mt-4 flex-1">{children}</main>
            {modal}
          </div>
        </ThemeProvider>
      </body>
    </html>
  );
}
